<template>
  <div>
    <van-nav-bar
      title="365行职业图鉴"
      left-text=""
      left-arrow
      @click-left="fun()"
    />
    <img src="qiqi/职业图鉴_02.png" alt="" />
    <img class="imgs1" src="qiqi/zhiyehenfu.png" alt="" />
    <main>
      <div class="tuwen" v-for="v in this.$store.state.qiqi.arr6" :key="v.id">
        <img style="width: 1.65rem; height: 1.61rem" :src="v.img" alt="" />
        <p>
          <b>{{ v.job }}</b
          ><br />
          {{ v.jian }}
        </p>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.push("/baike");
    },
  },
  mounted() {
    this.$store.dispatch("TUTU");
    console.log(this.$store.state.qiqi);
  },
};
</script>

<style lang="scss" scoped>
* {
  font-size: 0.16rem;
}
img {
  width: 100%;
  height: 100%;
}
.imgs1 {
  position: relative;
  top: -0.4rem;
}
main {
  padding: 0.15rem;
  height:11.06rem;
  width: 100%;
  background-color: #5d8ee5;
  position: relative;
  top: -0.65rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .tuwen {
    margin-bottom: 0.15rem;
    width: 1.65rem;
    height: 2.42rem;
    border-radius: 0.1rem;
    background-color: white;
    p {
      margin-left: 10px;
      b {
        font-size: 0.14rem;
        color: black;
        font-weight: 700;
      }
      font-size: 0.12rem;
      color: #b8b8b8;
    }
  }
}
</style>